<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频合成工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #2b2b2b;
            color: white;
            margin: 0;
            padding: 0;
        }

        .container {
            padding: 20px;
            max-width: 1200px;
            margin: auto;
            background-color: #333;
            border-radius: 10px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .section {
            margin-bottom: 20px;
        }

        .section label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .input-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .input-group select,
        .input-group input,
        .input-group textarea {
            flex: 1;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #555;
            background-color: #444;
            color: white;
        }

        .audio-upload {
            padding: 20px;
            text-align: center;
            border: 2px dashed #555;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .audio-upload p {
            margin: 0;
        }

        .button {
            background-color: #555;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .button:hover {
            background-color: #777;
        }

        .row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .row > div {
            flex: 1;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>音频合成工具</h1>

    <div class="section">
        <label for="input-text">输入合成文本</label>
        <textarea id="input-text" rows="3" placeholder="请输入需要合成的文本..."></textarea>
    </div>

    <div class="section">
        <label>选择推理模式</label>
        <div class="input-group">
            <button class="button">预训练备份</button>
            <button class="button">3s极速建模</button>
            <button class="button">跨语种复制</button>
            <button class="button">自然音色控制</button>
        </div>
    </div>

    <div class="section">
        <label>操作步骤</label>
        <ul>
            <li>选择预训练备份</li>
            <li>点击生成音频按钮</li>
        </ul>
    </div>

    <div class="row">
        <div>
            <div class="audio-upload">
                <p>将音频拖放到此处</p>
                <p>或</p>
                <button class="button">点击上传</button>
            </div>
        </div>
        <div>
            <label>录制prompt音频文件</label>
            <button class="button">录制</button>
        </div>
    </div>

    <div class="section">
        <label for="prompt-text">输入prompt文本</label>
        <textarea id="prompt-text" rows="2" placeholder="请输入prompt文本..."></textarea>
    </div>

    <div class="section">
        <label for="instruct-text">输入instruct文本</label>
        <textarea id="instruct-text" rows="2" placeholder="请输入instruct文本..."></textarea>
    </div>

    <div class="section">
        <button class="button" id="generate-audio">生成音频</button>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#generate-audio').click(function () {
            alert('音频生成中...');
        });
    });
</script>
</body>
</html>
